<template>
<!--  景区详情  -->
    <view>
        <navbar :config="config"></navbar>
        <view class="header" :style="{paddingTop: $navHeight}">
            <banner-gradual></banner-gradual>
        </view>
        <view class="content">
            <view class="title">
                <text>五奇八景·五指石</text>
                <view class="evaluate">
                    <image src="/static/detail_icon_evaluatio.png"></image>
                    <text>评价</text>
                </view>
            </view>
        </view>
    </view>
    
</template>

<script>
    import bannerGradual from '@/components/banner/banner-gradual'
    import navbar from '@/components/navbar/navbar'

    export default {
        components: {
            bannerGradual,navbar
        },
        data(){
            return {
                config:{
                    title:"标题",
                    mode:"fixed",
                    transparent:true, //是否背景透明 默认白色
                    linearTitle:true,
                    isNavigateBack:true,
                },
                $navHeight: this.$navHeight
            }
        },
        created() {
            console.log(this.$navHeight)
        },
        methods :{
        }

    }
</script>

<style lang="scss">
    .header {
        width: 100%;height: 400rpx;
        padding-left: 20rpx;
        position: relative;
        background: url("https://static-nk.liux.co/image8/1341722/2531ba9f00003133.jpg");
        background-size: cover;
        &:before {
            content: '';
            position: absolute;z-index: 2;
            width: 100%;
            height: 100%;
            background: #000000;
            opacity: 0.6;
            top: 0;
            left: 0;
        }
        &:after {
            content: '';
            width: 140%;
            height: 200rpx;
            position: absolute;
            left: -1%;
            bottom: 0;
            z-index: 3;
            border-radius: 100% 20% 0 0;
            background: #FFFFFF;
        }
    }
    .content {
        padding: 34rpx;
        .title {
            display: flex;justify-content: space-between;align-items: center;
            font-size:36rpx;font-weight:bold;
            color: #333333;
            .evaluate {
                width:96rpx; height:40rpx; border-radius:4px;
                border:1px solid rgba(28,167,255,1);
                display: flex;align-items: center;justify-content: center;
                >text {
                    font-size: 20rpx;
                    color: rgba(28,167,255,1);
                    margin-left: 4rpx;
                }
                >image {
                    width: 22rpx;
                    height: 22rpx;
                }

            }
        }
    }

</style>